<template>
    <div>
        <el-container>
            <el-header>
                <Nav></Nav>
            </el-header>
            <el-main>
                <div class="content">
                    <el-form label-width="60px" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<!--                        <el-form-item label="题图" prop="title">-->
<!--                            <el-upload-->
<!--                                    class="upload-demo"-->
<!--                                    drag-->
<!--                                    action-->
<!--                                    multiple>-->
<!--                                <i class="el-icon-upload"></i>-->
<!--                                <div class="el-upload__text"><em>上传题图,让文章获取更多关注</em></div>-->
<!--                            </el-upload>-->
<!--                        </el-form-item>-->
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="ruleForm.title"></el-input>
                        </el-form-item>
                        <el-form-item label="摘要" prop="description">
                            <el-input type="textarea" v-model="ruleForm.description"></el-input>
                        </el-form-item>
                        <el-form-item class="content" label="内容" prop="content">
                            <mavon-editor
                                          ref="mavonEditor"
                                          v-model="ruleForm.content"
                                          @change="changeMavon"
                                          @imgAdd="addImg"
                                          @imgDel="delImg">

                            </mavon-editor>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
            <el-footer>备案号：冀ICP备19020033号</el-footer>
        </el-container>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    export default {
        name: "ArticleEdit.vue",
        components: {Nav},
        data() {
            return {
                user:{},
                ruleForm: {
                    id: '',
                    title: '',
                    description: '',
                    content: '',
                    contentHtml:""
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入摘要', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            changeMavon(val,reder){
                this.ruleForm.contentHtml = reder
            },
            addImg(pos,file){
                const param = new FormData();
                param.append("img", file);
                const config = {
                    headers: { "Content-Type": "multipart/form-data; boundary = -------" + new Date().getTime() }
                };
                this.$request.post("/article/upload/img", param, config).then(res => {
                    this.$refs.md.$img2Url(pos,this.ruleForm.avatar = res.data.imgUrl);     //将原来的图片url替换成data.url,注意$img2Url是自带的函数.
                });
            },
            delImg(pos){
                pos=pos[0];
                // this.$axios.post("/deleteImg?imgId="+pos);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this
                        this.$request({
                            url: '/article/edit',
                            method: 'post',
                            params:{
                                id:_this.ruleForm.id,
                                title:_this.ruleForm.title,
                                description:_this.ruleForm.description,
                                content:_this.ruleForm.contentHtml,
                            }
                        }).then(res => {
                            if(res.code === 200){
                                _this.$alert('操作成功', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push({
                                            path:"/space",
                                            query:{
                                                userId:this.author.id,
                                            }
                                        })
                                    }
                                });
                            }
                        })
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created() {
            if(this.$store.getters.getUser) {
                this.user.nickName = this.$store.getters.getUser.nickName
                this.user.avatar = this.$store.getters.getUser.avatar
                this.user.id = this.$store.getters.getUser.id
            }
        }
    }
</script>

<style scoped>

    .el-header, .el-footer {
        background-color: white;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-main{
        background-color: white;
        padding: 5px;
        margin: 5px auto;
        max-width: 1200px;
        text-align: center;
        min-height: 1200px;
    }
</style>
